昨天我們學會了如何把專案結構整理乾淨。

但一個專案隨著重構、功能新增，最常見的問題就是：改了一個地方，壞了另外一個地方。

今天的目標，就是要讓專案開始具備「保護自己」的能力 —— 自動化測試（Testing）。

🧪 為什麼需要測試？

想像一下情境：

• 你把 auth 模組重構了，結果登入壞掉了。
• 你在 posts 新增了 API，但不小心回傳型別錯誤。
• 你寫了一堆功能，但一周後已經忘了細節，誰敢保證不會出錯？

測試就是一種 保險：

• 在你重構時提醒「東西壞掉了」
• 在你新增功能時確認「舊功能還能正常跑」
• 在團隊合作時，確保「別人不會無意中搞壞你的程式碼」

🛠️ 常見測試種類

1. 單元測試（Unit Test）
   • 測一個小小的 function 或 component。
   • 例如：calculatePrice() 是否回傳正確數字。
2. 整合測試（Integration Test）
   • 測「模組與模組」之間的合作是否正確。
   • 例如：登入成功後，user 狀態是否正確更新。
3. 端對端測試（E2E Test）
   • 模擬使用者操作，測整個流程。
   • 例如：使用者打開頁面 → 輸入帳號密碼 → 點登入 → 成功跳轉到首頁。

⚙️ 專案測試環境設定（以 Next.js + Jest 為例）

# 安裝測試套件
npm install --save-dev jest @testing-library/react @testing-library/jest-dom

建立 jest.config.js：

module.exports = {
  testEnvironment: "jsdom",
  setupFilesAfterEnv: ["@testing-library/jest-dom"],
}

✍️ 寫一個簡單測試範例

假設有一個按鈕：

// shared/components/Button.tsx
export function Button({ label }: { label: string }) {
  return <button>{label}</button>
}

測試它是否正確渲染：

// shared/components/Button.test.tsx
import { render, screen } from "@testing-library/react"
import { Button } from "./Button"

test("renders button with label", () => {
  render(<Button label="Click Me" />)
  expect(screen.getByText("Click Me")).toBeInTheDocument()
})

執行測試：

npm run test

結果會顯示：

✅ renders button with label

🤖 Cursor 與測試的結合

你甚至可以直接請 Cursor 幫你寫測試：

幫 Button.tsx 產生對應的 Jest 測試

或：

幫 useAuth hook 建立單元測試，模擬 login API 成功與失敗的情境

Cursor 會自動產生測試檔案，讓你快速有個基礎測試可以跑。

🔄 Git 與測試的結合

新的習慣：

• 重構前 → 先跑測試，確認目前一切正常
• 重構後 → 再跑一次測試，確認沒壞掉

甚至可以設定 CI/CD（例如 GitHub Actions），讓每次 Push 自動跑測試，出錯就不允許合併。

✅ 今天的任務

1. 安裝 Jest 與 React Testing Library。
2. 為一個共用元件（例如 Button / Card）寫第一個測試。
3. 嘗試用 Cursor 產生測試檔案，觀察結果。
4. 在重構檔案前後，跑測試確保程式沒壞。

📌 Day 17 總結

今天我們學會了：

• 測試是專案的「保險」，避免改壞舊功能
• 單元測試 / 整合測試 / E2E 測試的差異
• 如何在 Next.js 中建立 Jest 測試環境
• 如何讓 Cursor 幫你自動生成測試檔案
• 養成「跑測試 → 重構 → 再跑測試 → Commit」的好習慣